<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>物料投放 -- 数据统计</title>
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap.min.css">
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap-datetimepicker.min.css">
    <link href="${contextPath}/static/ztree/css/zTreeStyle.css" rel="stylesheet"/>
    <script src="${contextPath}/static/statistics/js/jquery.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap.min.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.min.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.fr.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="${contextPath}/static/statistics/js/vue.js"></script>
    <script src="${contextPath}/static/statistics/js/echarts.min.js"></script>
    <script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.mockjax.js"></script>
    <script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.autocomplete.js"></script>
    <script type="text/javascript" src="${contextPath}/static/util/my-autocomplete.js"></script>
    <script type="text/javascript" src="${contextPath}/static/ztree/js/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript" src="${contextPath}/static/ztree/js/jquery.ztree.excheck-3.5.js"></script>
    <style>


        @-webkit-keyframes bouncedelay {
            0%, 80%, 100% {
                -webkit-transform: scale(0.0)
            }
            40% {
                -webkit-transform: scale(1.0)
            }
        }

        @keyframes bouncedelay {
            0%, 80%, 100% {
                transform: scale(0.0);
                -webkit-transform: scale(0.0);
            }
            40% {
                transform: scale(1.0);
                -webkit-transform: scale(1.0);
            }
        }

        .autocomplete-suggestions {
            border: 1px solid #999;
            background: #FFF;
            overflow: auto;
        }

        .autocomplete-suggestion {
            padding: 2px 5px;
            white-space: nowrap;
            overflow: hidden;
        }

        .autocomplete-selected {
            background: #F0F0F0;
        }

        .autocomplete-suggestions strong {
            font-weight: normal;
            color: #3399FF;
        }

        @-moz-document url-prefix() {
            fieldset {
                display: table-cell;
            }
        }
    </style>
</head>
<body style="background: rgba(119, 118, 118, 0.15);">
<div class="container-fluid" id="app">
    <div class="row">
        <h4 class="col-sm-6 col-xs-9">物料投放统计：</h4>
    </div>

    <form class="form-inline" style=" margin-bottom: 5px;">
        <shiro:hasPermission name="CLOUDERPORDERSPLADMINORDER:STATISTICS">
            <div class="form-group">
                <input id="quXianNameInput" onfocus="this.value=''" class="form-control input-sm" type="text" placeholder="区县名称">
            </div>
        </shiro:hasPermission>

        <shiro:lacksPermission name="CLOUDERPORDERSPLEMPORDER:STATISTICS">
            <shiro:lacksPermission name="CLOUDERPORDERSPLCHANNELORDER:STATISTICS">

                <div class="form-group">
                    <input id="channelNameId" onfocus="this.value=''" class="form-control input-sm" type="text" placeholder="渠道名称">
                </div>
            </shiro:lacksPermission>
            <div class="form-group">
                <input id="empNameInput" onfocus="this.value=''" class="form-control input-sm" type="text" placeholder="客户经理">
            </div>
        </shiro:lacksPermission>
        <div class="form-group">
            <input id="shopNameId" onfocus="this.value=''" class="form-control input-sm" type="text" placeholder="店铺名称">
        </div>
        <div class="form-group">
            <input id="orderLevelInput" class="form-control input-sm" type="text" placeholder="档位名称">
        </div>
        <div class="form-group">
            <select class="form-control input-sm" id="isExp">
                <option value="-1">--是否试点--</option>
                <option value="1" selected>是</option>
                <option value="0">否</option>
            </select>
        </div>
        <shiro:hasPermission name="SCRATCHOFF:STATISTICSADMIN">
            <div class="form-group">
                <input id="sourceInput" class="form-control input-sm" type="text" placeholder="物料来源">
            </div>
        </shiro:hasPermission>

        <button type="button" class="btn btn-sm btn-success" @click="getData();">查询</button>
    </form>

    <div class="row">
        <div class="col-sm-12 col-xs-12 col-md-4 col-lg-4 main" id="main1" style="margin-top: 10px;"></div>
        <div class="col-sm-12 col-xs-12 col-md-4 col-lg-4 main" id="main2" style="margin-top: 10px;"></div>
        <div class="col-sm-12 col-xs-12 col-md-4 col-lg-4 main" id="main3" style="margin-top: 10px;"></div>
    </div>

    <div class="row">
        <div class="col-sm-12 col-xs-12 col-md-12 col-lg-12 main" id="main4" style="margin-top: 10px;"></div>
        <%--<div class="col-sm-12 col-xs-12 col-md-8 col-lg-8 main" id="main5" style="margin-top: 10px;"></div>--%>
    </div>
</div>
</body>
<script src=${contextPath}/static/layer/layer.js></script>
<script type="text/javascript">

    var app = new Vue({
        el: '#app',
        data: {
            queryModel : {
                cityName : '',
                quXianName : '',
                channelName : '',
                empName : '',
                shopName : '',
                orderLevel : '',
                isExp : '',
                source : '',
            },


        },
        methods: {
            getData: function () {
                layer.load(1);
                var vm = this;
                this.setDataValue();
                $.ajax({
                    url: '${contextPath}/page/getScratchStatistics',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        stringMap: vm.queryModel
                    },
                    success: function (data) {
                        layer.closeAll('loading')
                        if (data.success) {
                            var main1Data = data.data.main1Data;
                            vm.updateMain1Data(main1Data);

                            var main2Data = data.data.main2Data;
                            vm.updateMain2Data(main2Data);

                            var main3Data = data.data.main3Data;
                            vm.updateMain3Data(main3Data);

                            var main4Data = data.data.main4Data;
                            vm.updateMain4Data(main4Data);

                            /*var main5Data = data.data.main5Data;
                            vm.updateMain5Data(main5Data);*/
                        }
                    },
                    error: function (error) {
                        layer.closeAll('loading')
                        layer.msg("网络错误")
                    }
                })
            },
            updateMain1Data: function (main1Data) {
                if (!main1Data) return;
                var names = main1Data.names;
                var total = main1Data.data;

                var main1Option  = {
                    title: {
                        text: '当天中奖统计',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: names
                    },
                    series: [
                        {
                            name: '中奖数据',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: total,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                myChart1.setOption(main1Option)
            },
            updateMain2Data: function (main2Data) {
                if (!main2Data) return;
                var names = main2Data.names;
                var total = main2Data.data;

                var main2Option = {
                    title: {
                        text: '当周中奖统计',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: names
                    },
                    series: [
                        {
                            name: '中奖数据',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: total,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                myChart2.setOption(main2Option)
            },
            updateMain3Data: function (main3Data) {
                if (!main3Data) return;
                var names = main3Data.names;
                var total = main3Data.data;

                var main3Option = {
                    title: {
                        text: '当月中奖统计',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: names
                    },
                    series: [
                        {
                            name: '中奖数据',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: total,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                myChart3.setOption(main3Option)
            },
            updateMain4Data: function (main4Data) {


                if (!main4Data) return;
                var names = main4Data.names;
                var total = main4Data.data;

                var main4Option = {
                    title: {
                        text: '剩余物料统计',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: names
                    },
                    series: [
                        {
                            name: '中奖数据',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: total,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                myChart4.setOption(main4Option)

            },
            updateMain5Data: function (main5Data) {
                if (!main5Data) return
                /**
                 * 为了解决数据为空的情况，采用如此方法解决
                 * main1Data:[{name:'00:00-05:59',time:12,quantity:200}]
                 *
                 * */

                var quantitySum = []
                var orderCount = []
                for (var index in main5Data) {
                    var data = main5Data[index]
                    quantitySum.push(data.quantitySum)
                    orderCount.push(data.orderCount)
                }

                var main5Option = {
                    color: ['#4690FF'],
                    title: {
                        text: '购买变化次数'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        feature: {
                            dataView: {
                                show: false,
                                readOnly: false
                            },
                            restore: {
                                show: false
                            },
                            saveAsImage: {
                                show: false
                            }
                        }
                    },
                    grid: {
                        containLabel: true
                    },
                    legend: {
                        data: ['购买次数']
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            show: true,
                            splitNumber: 15,
                            textStyle: {
                                fontFamily: "微软雅黑",
                                fontSize: 12
                            }
                        },
                        data: quantitySum
                    }],
                    yAxis: [
                        {
                            type: 'value',
                            name: '购买次数',
                            position: 'left',
                            axisLabel: {
                                formatter: '{value} 次'
                            }
                        },],
                    series: [{
                        name: '购买次数',
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                            }
                        },
                        data: orderCount
                    }]
                }
                myChart5.setOption(main5Option)
            },
            setDataValue : function () {
                /*var cityName = $("#cityNameInput").val();*/
                var quXianName = $("#quXianNameInput").val();
                var channelName = $("#channelNameId").val();
                var empName = $("#empNameInput").val();
                var shopName = $("#shopNameId").val();
                var orderLevel = $("#orderLevelInput").val();
                var isExp = $("#isExp").val();
                var source = $("#sourceInput").val();


                /*app.queryModel.cityName =cityName;*/
                app.queryModel.quXianName =quXianName;
                app.queryModel.channelName = channelName;
                app.queryModel.empName = empName;
                app.queryModel.shopName = shopName;
                app.queryModel.orderLevel = orderLevel;
                app.queryModel.isExp = isExp;
                app.queryModel.source = source;



            },
            setInputValue : function (queryParams) {
                if (!queryParams) return;
                 $("#quXianNameInput").val(queryParams.quXianName ? queryParams.quXianName : '');
                 $("#channelNameId").val(queryParams.channelName ? queryParams.channelName : '');
                 $("#empNameInput").val(queryParams.empName ? queryParams.empName : '');
                 $("#shopNameId").val(queryParams.shopName ? queryParams.shopName : '');
                 $("#orderLevelInput").val(queryParams.orderLevel ? queryParams.orderLevel : '');
                 $("#isExp").val(queryParams.isExp ? queryParams.isExp : '');
                 $("#sourceInput").val(queryParams.source ? queryParams.source : '');
            }
        },
    });


    $(".main").height($("#main1").width())
    var myChart1 = echarts.init($("#main1")[0])
    var myChart2 = echarts.init($("#main2")[0])
    var myChart3 = echarts.init($("#main3")[0])
    var myChart4 = echarts.init($("#main4")[0])
    /*var myChart5 = echarts.init($("#main5")[0])*/

     var queryParams = ${queryParams}
     //console.log(queryParams)
     app.setInputValue(queryParams);

    app.getData();

    var cityNode, quXianNode, channelNode, empNode, custNode, shopNode;

    <shiro:lacksPermission name="CLOUDERPORDERSPLEMPORDER:STATISTICS">
    empNode = '#empNameInput';
    channelNode = '#channelNameId';
    <shiro:hasPermission name="CLOUDERPORDERSPLADMINORDER:STATISTICS">
    quXianNode = '#quXianNameInput';
    </shiro:hasPermission>
    </shiro:lacksPermission>
    shopNode="#shopNameId";

    organization_tree('${contextPath}',cityNode, quXianNode, channelNode, empNode, custNode, shopNode);

    selectOrderLevel('${contextPath}',"#orderLevelInput",null)

    <shiro:hasPermission name="SCRATCHOFF:STATISTICSADMIN">
        selectSource('#sourceInput',null)
    </shiro:hasPermission>
</script>
</html>


